<template>
  <div class="region-list buy-page">
    <div class="header">
      <div class="header-input">
        <img class="search-left" @click="goBackMain" src="../../../static/left.png" alt="">
        <input class="search-input"   :class="$store.state.localLang == 'MM' ? 'fontsforweb_fontid_40615' : ''" onfocus="this.blur();" :value="getInfoValue" @click.self.prevent="showIfram" type="text" :placeholder="$t('m.PropertyName') + '/' + $t('m.Street')">
      </div>
      <div class="line-white"></div>
      <mt-tabbar v-model="selected">
        <mt-tab-item class="tab-box" id="0" @click.native="onClicktab(0)">
          {{$t('m.Location')}} <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="1" @click.native="onClicktab(1)">
          {{$t('m.Type')}} <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="2" @click.native="onClicktab(2)">
          {{$t('m.Price')}} <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="3" @click.native="onClicktab(3)">
          {{$t('m.Room')}} <span class="san-box"></span>
        </mt-tab-item>
      </mt-tabbar>
    </div>

    <!--列表区域-->
    <div class="list-box">
      <mt-loadmore :top-method="reFreshList" topPullText="" topDropText="" topLoadingText="" ref="loadmore"
                   v-infinite-scroll="loadMoreItems"
                   infinite-scroll-disabled="loading"
                   infinite-scroll-distance="50" class="list-items">
        <div class="buy-list" v-for="item in tableData" @click="goToDetail(item.transactionId)">
          <div class="buy-list-box">
            <div class="buy-img-box">
              <img v-lazy="item.photoUrl" class="buy-img" :style="defaultImage" alt=""/>
            </div>
            <div class="buy-info-box">
              <p class="title" v-if="item.burmeseTitle || item.englishTitle">{{ $i18n.locale == 'MM'
                ? translateUTZaw(item.burmeseTitle) : translateUTZaw(item.englishTitle)}}</p>
              <p>{{getPropertytype(item.propertyTypeId)}}/{{getSubPropertytype(item.propertySubTypeId)}}</p>
              <p>{{ item.street?translateUTZaw(item.street)+',' :''}}{{getTownshipId(item.townshipId)}},{{getregionId(item.regionId)}}</p>
              <p v-if="item.propertyTypeId !=4"><span>{{regexNum(item.masterBedrooms)}} Master</span> <span>{{ regexNum(item.bedrooms)}} {{$t('m.Beds')}}</span>
                <span>{{ regexNum(item.bathrooms)}} {{$t('m.Baths')}}</span>
              </p>
              <div class="text-a">
                <p class="price" v-if="item.usdPrice">
                  <span class="price-currency">{{regexNum(item.usdPrice)}}&nbsp;USD</span>
                  <span class="price-currency" v-if="item.mmkPrice">({{regexNum(item.mmkPrice)}}&nbsp;Lks)</span>
                </p>
                <p class="price" v-else-if="item.mmkPrice">
                  <span class="price-currency">{{regexNum(item.mmkPrice)}}&nbsp;Lks</span>
                </p>
                <p v-if="item.floorWidth"> {{regexNum(item.floorWidth)+' x '+regexNum(item.floorLength)+' ='+regexNum(item.floorSize)+' sqft'}}</p>
                <p v-if="!item.floorWidth&&item.floorSize">{{regexNum(item.floorSize)+' sqft'}}</p>
                <p
                  v-if="(item.landWidth)&&(item.propertyTypeId == 3 ||item.propertyTypeId == 4||item.propertyTypeId == 8)">
                  {{regexNum(item.landWidth)+' x '+regexNum(item.landLength)+' = '+regexNum(item.landSize)+' sqft'}}</p>
                <p
                  v-if="(!item.landWidth&&item.landSize) &&(item.propertyTypeId == 3 ||item.propertyTypeId == 4||item.propertyTypeId == 8)">
                  {{regexNum(item.landSize)+' sqft'}}</p>
              </div>

            </div>
          </div>
        </div>
        <div class="loading-more-box" v-if="loading">
          <mt-spinner :type="3" class="loading-more"></mt-spinner>
        </div>
        <div v-if="pageData.pageNum >= pageInfo.totalPages" class="no-data">No data</div>
      </mt-loadmore>
    </div>

    <!--顶部input搜索-->
    <div class="search-ifram" v-show="iframShow">
      <mt-radio
        :title="$t('m.Search')"
        v-model="radioValue"
        :options="options">
      </mt-radio>
      <div class="info-input-box">
        <input
          class="info-input"
          :class="$store.state.localLang == 'MM' ? 'fontsforweb_fontid_40615' : ''"
          v-model="infoValue"
          cancel-text=""
          placeholder="">
      </div>
      <div class="btn-box">
        <mt-button @click="hideIfram" style="padding: 0 12px!important;" type="default" class="button Back-btn">
          {{$t('m.Back')}}
        </mt-button>
        <mt-button type="default" style="padding: 0 12px!important;" class="button" @click="onSearch">
          {{$t('m.Search')}}
        </mt-button>
      </div>
    </div>

    <!--location 选择层-->
    <mt-popup
      v-model="LocationPopupVisible"
      style="width: 100%;height: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <ul class="township-box">
        <li class="township-box-wrap" v-for="item in townshipCurrent"
            @click="clickTownshipItem($event, item.value, item.text)">
          <div class="township-item location-item">{{item.text}}</div>
        </li>
      </ul>
    </mt-popup>

    <!--Type 选择层-->
    <mt-popup
      v-model="typePopupVisible"
      style="width: 100%;overflow: auto;"
      :closeOnClickModal="false"
      class="popup-wrap"
      position="bottom">
      <div style="padding: .05rem; overflow: hidden; margin-top: .1rem; margin-right: .1rem">
        <mt-button class="confirm-btn" @click="onConfirm" type="default">{{$t('m.Confirm')}}</mt-button>
        <mt-button class="reset-btn" @click="onReset" type="default">{{$t('m.Cancel')}}</mt-button>
      </div>
      <mt-picker :slots="slots" @change="onSoltValuesChange"></mt-picker>
    </mt-popup>

    <!--Price 选择层-->
    <mt-popup
      v-model="PricePopupVisible"
      style="width: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <ul class="township-box">
        <li class="price-box-wrap" v-for="item in PriceArr"
            @click="clickPriceItem($event, item.value, item.text)">
          <div class="township-item">{{item.text}}</div>
        </li>
      </ul>
      <div class="price-box">
        <input class="price-input" v-model="searchForm.priceMin" type="text">
        <span>-</span>
        <input class="price-input" v-model="searchForm.priceMax" type="text">
        <span>Lks</span>
        <mt-button class="confirm-btn" style="width: .9rem" @click="onPriceConfirm" type="default">{{$t('m.Confirm')}}
        </mt-button>
        <mt-button class="reset-btn" style="width: .9rem; margin-right: .05rem" @click="onPriceCancel" type="default">
          {{$t('m.Cancel')}}
        </mt-button>
      </div>
    </mt-popup>

    <!--Room 选择层-->
    <mt-popup
      v-model="RoomPopupVisible"
      style="width: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <div class="room-box">
        <div class="room-title">{{$t('m.Totalbedrooms')}}</div>
        <ul class="total-rooms-item-box">
          <li class="total-rooms-item" @click="onTapTotalRoom(0)"
              :class="totalBedroomsArr[0].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[0].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(1)"
              :class="totalBedroomsArr[1].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[1].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(2)"
              :class="totalBedroomsArr[2].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[2].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(3)"
              :class="totalBedroomsArr[3].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[3].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(4)"
              :class="totalBedroomsArr[4].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[4].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(5)"
              :class="totalBedroomsArr[5].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[5].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(6)"
              :class="totalBedroomsArr[6].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[6].text}}
          </li>
        </ul>

        <div class="room-title">{{$t('m.MasterBedroom')}}</div>
        <ul class="total-rooms-item-box">
          <li class="total-rooms-item" @click="onTapMasterRoom(0)"
              :class="masterBedroomsArr[0].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[0].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(1)"
              :class="masterBedroomsArr[1].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[1].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(2)"
              :class="masterBedroomsArr[2].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[2].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(3)"
              :class="masterBedroomsArr[3].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[3].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(4)"
              :class="masterBedroomsArr[4].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[4].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(5)"
              :class="masterBedroomsArr[5].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[5].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(6)"
              :class="masterBedroomsArr[6].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[6].text}}
          </li>
        </ul>

        <div class="room-title">{{$t('m.Bathroom')}}</div>
        <ul class="total-rooms-item-box">
          <li class="total-rooms-item" @click="onTapBathRoom(0)"
              :class="bathroomsArr[0].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[0].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(1)"
              :class="bathroomsArr[1].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[1].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(2)"
              :class="bathroomsArr[2].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[2].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(3)"
              :class="bathroomsArr[3].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[3].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(4)"
              :class="bathroomsArr[4].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[4].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(5)"
              :class="bathroomsArr[5].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[5].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(6)"
              :class="bathroomsArr[6].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[6].text}}
          </li>
        </ul>

        <div class="select-rooms-box">
          <mt-button style="width: 1rem; margin-right: .1rem;" @click="onRoomCancel" type="default">{{$t('m.Cancel')}}
          </mt-button>
          <mt-button @click="onConfirmRooms" class="select-rooms-bo-confirm" type="default">{{$t('m.Confirm')}}
          </mt-button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>


  import {searchBuyList} from '../../api/zxy_api'
  import qs from 'qs'

  // 英文json
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import regions from '@/json/region'
  import townships from '@/json/township'
  import buySort from '@/json/buySort'

  // 缅甸文json
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_buySort from '@/mmJson/buySort'

  // 缅甸unicode
  import mmu_propertyType from '@/mmUnicodeJson/propertyType'
  import mmu_propertySubType from '@/mmUnicodeJson/propertySubType'
  import mmu_regions from '@/mmUnicodeJson/region'
  import mmu_townships from '@/mmUnicodeJson/township'
  import mmu_buySort from '@/mmUnicodeJson/buySort'

  export default {
    name: 'Buy',
    data() {
      return {
        // regions: regions,
        regionId: 2,
        loading: false,
        list: [1, 2, 3, 43, 432, 543, 65, 4654, 6456],
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        searchValue: '',
        radioValue: 'propertyName',
        infoValue: '',
        getInfoValue: '',
        iframShow: false,
        selected: '',
        LocationPopupVisible: false,
        townshipIdSelsected: '',
        townshipValue: 'Location',
        typePopupVisible: false,
        propertyTypeId: '',
        propertySubTypeId: '',
        picker: '',
        PricePopupVisible: false,
        RoomPopupVisible: false,
        totalBedroomsArr: [
          {text: 'Any', value: 'Any', checked: true},
          {text: '0', value: '0', checked: false},
          {text: '1', value: '1', checked: false},
          {text: '2', value: '2', checked: false},
          {text: '3', value: '3', checked: false},
          {text: '4', value: '4', checked: false},
          {text: '5+', value: '5', checked: false},
        ],
        masterBedroomsArr: [
          {text: 'Any', value: 'Any', checked: true},
          {text: '0', value: '0', checked: false},
          {text: '1', value: '1', checked: false},
          {text: '2', value: '2', checked: false},
          {text: '3', value: '3', checked: false},
          {text: '4', value: '4', checked: false},
          {text: '5+', value: '5', checked: false},
        ],
        bathroomsArr: [
          {text: 'Any', value: 'Any', checked: true},
          {text: '0', value: '0', checked: false},
          {text: '1', value: '1', checked: false},
          {text: '2', value: '2', checked: false},
          {text: '3', value: '3', checked: false},
          {text: '4', value: '4', checked: false},
          {text: '5+', value: '5', checked: false},
        ],


        // 往下列表相关
        defaultImage: {
          backgroundImage: "url(" + require("../../../static/default.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "auto 100%",
          backgroundPositionX: "center",
        },
        loading: false,
        // 搜索子段
        landSizeShow: false,
        townships: [],
        searchForm: {
          RegionID: 2,
          townshipId: [],
          propertyTypeId: '',
          propertySubTypeId: [],
          priceMin: '',
          priceMax: '',
        },
        moreForm: {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          landSizeList: [
            {minSize: '', maxSize: ''}
          ],
          floorLevelId: [],
          FurnishingId: [],
          BuildingAgeID: [],
          FacingID: [],
          SourceId: ''
        },
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        showMore: false,
        showOther: true,
        // 列表数据
        tableData: [],
        sortForm: '',
        isRefresh: false,
      }
    },
    methods: {
      // translateTitle(item){
      //   if(this.$i18n.locale == 'MM'){
      //     return  item.burmeseTitle;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(item.burmeseTitle,'zawgyiTounicode')
      //   }else {
      //     return item.englishTitle;
      //   }
      // },
      // translateStreet(item){
      //   if(this.$i18n.locale == 'MM'){
      //     return  item.street;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(item.street,'zawgyiTounicode')
      //   }else {
      //     return item.street;
      //   }
      // },
      hideIfram: function () {
        this.iframShow = false;
      },
      showIfram: function () {
        this.iframShow = true;
        // this.infoValue = this.getInfoValue;
      },
      goBackMain: function () {
        // this.$router.push('main');
        history.back()
      },
      onSearch: function () {
        this.iframShow = false;
        this.getInfoValue = this.infoValue;
        // 调用搜索的接口
        this.getList(1)
        this.isRefresh = true;
      },
      onClicktab: function (id) {
        if (id == 0) { // location
          let township = this.township;
          for (var t = 0; t < township.length; t++) {
            if (this.regionId == township[t].regionId) {
              this.townshipCurrent.push({value: township[t].value, text: township[t].text})
            }
          }
          // 如果是首次打开则将any 设置为黄色
          if (!this.townshipIdSelsected) {
            var arr = document.getElementsByClassName('township-box-wrap')
            // 设置当前的dom
            arr[0].style.background = '#FF9800'
            arr[0].style.color = '#fff'
          }
          this.LocationPopupVisible = true;
        } else if (id == 1) { // Type
          this.typePopupVisible = true;
        } else if (id == 2) { // Price
          this.PricePopupVisible = true;
        } else if (id == 3) {  // Room
          this.RoomPopupVisible = true;
        }
      },
      clickTownshipItem: function (event, value, text) { // 点击选择城镇
        var e = event.currentTarget;
        // 清除其余选择态
        var arr = document.getElementsByClassName('township-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        // 选择了城镇之后保存到state  并且loaction中做显示
        if (value == 'Any') {
          this.townshipIdSelsected = '';
          this.townshipValue = 'Location';
        } else {
          this.townshipIdSelsected = value;
          this.townshipValue = text;
        }

        this.LocationPopupVisible = false;
        this.getList(1);
        this.isRefresh = true;
      },
      onSoltValuesChange(picker, values) {
        // 首先peropertyTypeId设置
        for (let i = 0; i < this.propertyType.length; i++) {
          if (this.propertyType[i].text == values[0]) {
            this.propertyTypeId = this.propertyType[i].value;
          }
        }

        let arrhh = []

        for (let i = 0; i < this.propertySubType.length; i++) {
          if (this.propertySubType[i].propertyTypeId == this.propertyTypeId) {
            arrhh.push(this.propertySubType[i].text)
          }
        }

        if (this.$store.state.localLang == 'MM') {
          arrhh.unshift('အားလံုး')
          if (values[0] === 'အားလံုး') {
            let arr = ['အားလံုး']
            picker.setSlotValues(1, arr);
          } else {
            picker.setSlotValues(1, arrhh);
          }
        } else {
          arrhh.unshift('Any')
          if (values[0] === 'Any') {
            let arr = ['Any']
            picker.setSlotValues(1, arr);
          } else {
            picker.setSlotValues(1, arrhh);
          }
        }


        // 设置选择的propertySubTypeId
        for (let i = 0; i < this.propertySubType.length; i++) {
          if (values[1] == this.propertySubType[i].text && this.propertySubType[i].propertyTypeId == this.propertyTypeId) {
            this.propertySubTypeId = this.propertySubType[i].value;
          }
        }

        this.picker = picker;
        if (values[0] === 'Any' || values[0] === 'အားလံုး') {
          this.propertyTypeId = '';
          this.propertySubTypeId = '';
        }
        if (values[1] === 'Any' || values[1] === 'အားလံုး') {
          this.propertySubTypeId = '';
        }
      },
      onConfirm: function () {
        // 获取当前选中的picker vlues
        // 当值为 any any的时候清除id
        this.getList(1)
        this.isRefresh = true;
        this.typePopupVisible = false;
      },
      onReset: function () {
        // 将数据全部重制为any
        // this.picker.setValues(['Any', 'Any'])
        this.typePopupVisible = false;
      },
      onPriceConfirm: function () {
        this.PricePopupVisible = false;
        this.getList(1);
        this.isRefresh = true;
      },
      onPriceCancel: function () {
        this.PricePopupVisible = false;
      },
      onTapTotalRoom: function (index) {
        if (index == 0 && (this.totalBedroomsArr[0].checked == false)) {
          this.totalBedroomsArr[0].checked = true;
          for (let i = 1; i < this.totalBedroomsArr.length; i++) {
            this.totalBedroomsArr[i].checked = false;
          }
          return;
        }
        if (index > 0) {
          this.totalBedroomsArr[index].checked = !this.totalBedroomsArr[index].checked;
        }
        for (let i = 1; i < this.totalBedroomsArr.length; i++) {
          if (this.totalBedroomsArr[i].checked) {
            this.totalBedroomsArr[0].checked = false;
          }
        }
        console.log(this.totalBedroomsArr, '当前选中的total bedrooms')
      },
      onTapMasterRoom: function (index) {
        // 数据初始化
        for (let i = 0; i < this.masterBedroomsArr.length; i++) {
          this.masterBedroomsArr[i].checked = false;
        }

        if (index > 0) {
          this.masterBedroomsArr[index].checked = !this.masterBedroomsArr[index].checked;
        } else if (index == 0) {
          for (let i = 1; i < this.masterBedroomsArr.length; i++) {
            if (!this.masterBedroomsArr[i].checked) {
              this.masterBedroomsArr[0].checked = true;
            }
          }
        }

      },
      onTapBathRoom: function (index) {
        // 数据初始化
        for (let i = 0; i < this.bathroomsArr.length; i++) {
          this.bathroomsArr[i].checked = false;
        }

        if (index > 0) {
          this.bathroomsArr[index].checked = !this.bathroomsArr[index].checked;
        } else if (index == 0) {
          for (let i = 1; i < this.bathroomsArr.length; i++) {
            if (!this.bathroomsArr[i].checked) {
              this.bathroomsArr[0].checked = true;
            }
          }
        }
      },
      onConfirmRooms: function () {
        this.RoomPopupVisible = false;
        this.getList(1)
        this.isRefresh = true;
      },
      onRoomCancel: function () {
        this.RoomPopupVisible = false;
      },
      clickPriceItem: function (event, value, text) {
        var e = event.currentTarget;
        // 清除其余选择态
        var arr = document.getElementsByClassName('price-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        if (value == 'Any') {
          this.searchForm.priceMin = '';
          this.searchForm.priceMax = '';
        } else {
          if (value < 100) {
            this.searchForm.priceMax = 100;
          } else if (value == 100) {
            this.searchForm.priceMin = 100;
            this.searchForm.priceMax = 200;
          } else if (value == 200) {
            this.searchForm.priceMin = 200;
            this.searchForm.priceMax = 300;
          } else if (value == 300) {
            this.searchForm.priceMin = 300;
            this.searchForm.priceMax = 400;
          } else if (value == 400) {
            this.searchForm.priceMin = 400;
            this.searchForm.priceMax = 500;
          } else if (value == 500) {
            this.searchForm.priceMin = 500;
            this.searchForm.priceMax = 600;
          } else if (value == 600) {
            this.searchForm.priceMin = 600;
            this.searchForm.priceMax = 700;
          } else if (value == 700) {
            this.searchForm.priceMin = 700;
            this.searchForm.priceMax = 800;
          } else if (value == 800) {
            this.searchForm.priceMin = 800;
            this.searchForm.priceMax = 900;
          } else if (value == 900) {
            this.searchForm.priceMin = 900;
            this.searchForm.priceMax = 1000;
          } else if (value > 1000) {
            this.searchForm.priceMin = 1000;
          }
        }

        this.PricePopupVisible = false;
        this.getList(1);
        this.isRefresh = true;
      },

      // 往下列表相关
      reFreshList() {
        this.isRefresh = true
        this.getList(1)
        this.$refs.loadmore.onTopLoaded()
        return false
      },
      regexNum(v, len, split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      getTownships(regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getSubType(type) {
        // 首先处理部分dom 显示隐藏

        // 初始化
        // var arrShow = [
        //   {"value": 1, "text": "Apartment", "showland": false},
        //   {"value": 2, "text": "Condo", "showland": false},
        //   {"value": 3, "text": "House", "showland": true},
        //   {"value": 4, "text": "Land", "showland": true, "showOther": true},
        //   {"value": 8, "text": "Commercial", "showland": true}
        // ]

        if (this.searchForm.propertyTypeId == 1 || this.searchForm.propertyTypeId == 2) {
          this.landSizeShow = false
        } else {
          this.landSizeShow = true
        }

        if (this.searchForm.propertyTypeId == 4) {
          this.showOther = false
        } else {
          this.showOther = true
        }

        // 将more中数据初始化
        this.moreForm = {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          landSizeList: [
            {minSize: '', maxSize: ''}
          ],
          floorLevelId: [],
          FurnishingId: [],
          BuildingAgeID: [],
          FacingID: [],
          SourceId: ''
        };

        let subType = []
        this.propertySubType = []
        this.searchForm.propertySubTypeId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      toggleShowMore() {
        this.showMore = !this.showMore
      },
      getPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertyType) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of propertyType) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getSubPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of propertySubType) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getTownshipId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of townships) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getregionId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_regions) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of regions) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      onTotalBedroomsChange(val) {
        for (var i = 0; i < this.moreForm.totalBedrooms.length; i++) {
          if (this.moreForm.totalBedrooms[i] == 'Any') {
            if (this.moreForm.totalBedrooms[0] == 'Any' && val.length > 1) {
              this.moreForm.totalBedrooms.shift()
            } else {
              this.moreForm.totalBedrooms = ['Any']
            }
          }
        }
      },
      onToggleAny(val, name) {
        let arr = this.moreForm[name] || [];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == 'Any') {
            if (arr[0] == 'Any' && val.length > 1) {
              this.moreForm[name].shift()
            } else {
              this.moreForm[name] = []
            }
          }
        }
      },
      onToggleAnySingle(val, name) {
        if (val == 'Any') {
          this.moreForm[name] = ''
        }
      },
      goToDetail(id) {
        // const {href} = this.$router.resolve({
        //   name: 'foo',
        //   path: '/buyDetails',
        //   query: {
        //     id: id
        //   }
        // })
        // window.open(href, '_blank');
        this.$router.push({
          path: '/rentDetails',
          query: {
            id: id
          }
        })
      },
      getList(pageNum) {

        if (pageNum == 1) {
          this.pageData.pageNum = 1;
        }
        let searchForm = {};

        // 搜索子段处理
        searchForm.transactionTypeId = 2

        // 搜索propertyname street listingId
        if (this.infoValue) { //如果infovalue 有值的情况下
          if (this.radioValue == 'propertyName') {
            searchForm.propertyName = this.translateZTUnicode(this.infoValue);
          } else if (this.radioValue == 'Street') {
            searchForm.street = this.translateZTUnicode(this.infoValue);
          } else if (this.radioValue == 'ListingID') {
            searchForm.listingId = this.translateZTUnicode(this.infoValue);
          }
        }

        if (this.searchForm.RegionID) {
          searchForm.regionId = this.searchForm.RegionID
        }

        if (this.propertyTypeId) {
          searchForm.propertyTypeList = this.propertyTypeId
        }

        if (this.townshipIdSelsected) {
          searchForm.townshipIdList = this.townshipIdSelsected;
        }
        if (this.propertySubTypeId) {
          searchForm.propertySubTypeList = this.propertySubTypeId
        }

        // minPrice
        if (this.searchForm.priceMin) {
          searchForm.minPrice = this.searchForm.priceMin
        }
        // maxPrice
        if (this.searchForm.priceMax) {
          searchForm.maxPrice = this.searchForm.priceMax
        }

        // more搜索子段处理

        if (!this.totalBedroomsArr[0].checked) {
          let arr = [];
          for (let i = 0; i < this.totalBedroomsArr.length; i++) {
            if (this.totalBedroomsArr[i].checked) {
              if (this.totalBedroomsArr[i].value != 5) {
                arr.push(this.totalBedroomsArr[i].value)
              }
            }
          }
          searchForm.totalBedroomList = arr.join(',')
          if (this.totalBedroomsArr[6].checked) {
            searchForm.minTotalBedroom = '5'
          }
        }

        // Master Bedroom
        if (!this.masterBedroomsArr[0].checked) {
          if (this.masterBedroomsArr[1].checked) {
            searchForm.masterBedroomList = 0;
          } else {
            for (let i = 0; i < this.masterBedroomsArr.length; i++) {
              if (this.masterBedroomsArr[i].checked && (i != 1)) {
                searchForm.minMasterBedroom = this.masterBedroomsArr[i].value;
              }
            }
          }
        }

        // Bathroom
        if (!this.bathroomsArr[0].checked) {
          if (this.bathroomsArr[1].checked) {
            searchForm.bathroomList = 0;
          } else {
            for (let i = 0; i < this.bathroomsArr.length; i++) {
              if (this.bathroomsArr[i].checked && (i != 1)) {
                searchForm.minBathroom = this.bathroomsArr[i].value;
              }
            }
          }
        }

        // Floor size
        if (this.moreForm.floorSizeList[0].minSize || this.moreForm.floorSizeList[0].maxSize) {
          searchForm['floorSizeList[0].minSize'] = this.moreForm.floorSizeList[0].minSize;
          searchForm['floorSizeList[0].maxSize'] = this.moreForm.floorSizeList[0].maxSize;
        }

        // Land size
        if (this.moreForm.landSizeList[0].minSize || this.moreForm.landSizeList[0].maxSize) {
          searchForm['landSizeList[0].minSize'] = this.moreForm.landSizeList[0].minSize;
          searchForm['landSizeList[0].maxSize'] = this.moreForm.landSizeList[0].maxSize;
        }

        // floor level
        if (this.moreForm.floorLevelId.length > 0 && (!(this.moreForm.floorLevelId[0] == 'Any'))) {
          let floorLevelList = []
          let floorLevelRangeList = []
          for (let i = 0; i < this.moreForm.floorLevelId.length; i++) {
            if (this.moreForm.floorLevelId[i] > 5) {
              floorLevelList.push(this.moreForm.floorLevelId[i])
            } else if (this.moreForm.floorLevelId[i] <= 5) {
              floorLevelRangeList.push(this.moreForm.floorLevelId[i])
            }
          }

          for (let i = 0; i < floorLevelRangeList.length; i++) {
            if (floorLevelRangeList[i] == 1) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '1'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = '2'
            } else if (floorLevelRangeList[i] == 3) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '3'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = '4'
            } else if (floorLevelRangeList[i] == 5) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '5'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = ''
            }
          }

          // 数组传递
          if (floorLevelList.length > 0) {
            searchForm.floorLevelList = floorLevelList.join(',')
          }
        }

        // furnishing
        if (this.moreForm.FurnishingId.length > 0 && (!(this.moreForm.FurnishingId[0] == 'Any'))) {
          searchForm.furnishingList = this.moreForm.FurnishingId.join(',')
        }

        // Building Age
        if (this.moreForm.BuildingAgeID.length > 0 && (!(this.moreForm.BuildingAgeID[0] == 'Any'))) {
          for (let i = 0; i < this.moreForm.BuildingAgeID.length; i++) {
            if (this.moreForm.BuildingAgeID[i] == 0) {
              searchForm[`ageList[` + i + `].minAge`] = ''
              searchForm[`ageList[` + i + `].maxAge`] = '5'
            } else if (this.moreForm.BuildingAgeID[i] == 1) {
              searchForm[`ageList[` + i + `].minAge`] = '5'
              searchForm[`ageList[` + i + `].maxAge`] = '10'
            } else if (this.moreForm.BuildingAgeID[i] == 2) {
              searchForm[`ageList[` + i + `].minAge`] = '10'
              searchForm[`ageList[` + i + `].maxAge`] = '20'
            } else if (this.moreForm.BuildingAgeID[i] == 3) {
              searchForm[`ageList[` + i + `].minAge`] = '20'
              searchForm[`ageList[` + i + `].maxAge`] = ''
            }
          }
        }

        // Facing
        if (this.moreForm.FacingID.length > 0 && (!(this.moreForm.FacingID[0] == 'Any'))) {
          searchForm.facingList = this.moreForm.FacingID.join(',')
        }

        // Source
        if (this.moreForm.SourceId && (this.moreForm.SourceId != 'Any')) {
          searchForm.activeType = this.moreForm.SourceId
        }

        // sort
        if (this.sortForm) {
          searchForm.sort = this.sortForm
        }


        searchBuyList(Object.assign(searchForm, this.pageData)).then((res) => {
          // this.tableData = res.data.data.object.list || []

          // 刷新列表 or 加载更多
          if (this.isRefresh) {
            window.scrollTo(0, 0)
            this.tableData = res.data.data.object.list || []
            this.isRefresh = false
          } else {
            this.tableData = this.tableData.concat(res.data.data.object.list)
          }

          // 分页信息配置
          this.pageInfo.totalPages = res.data.data.object.pages
          this.pageInfo.totalCount = res.data.data.object.total
          this.pageData.pageNum = this.pageData.pageNum + 1
          this.loading = false
        }).catch((e) => {
          console.log(e)
        })
      },
      loadMoreItems() {
        if (this.pageData.pageNum >= this.pageInfo.totalPages) return false
        this.loading = true
        setTimeout(() => {
          this.getList()
        }, 1000)
        // this.getList()
        return false
      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
      translateZTUnicode(str){
        if (!str) return '';
        return this.$translateLang(str, 'zawgyiTounicode')
      },
    },
    computed: {
      buySortJson() {
        if (this.$store.state.localLang == 'MM') {
          return mm_buySort
        } else if (this.$store.state.localLang == 'MMU') {
          return mmu_buySort
        } else {
          return buySort
        }
      },
      propertyType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertyType
        } else if (this.$store.state.localLang == 'MMU') {
          return mmu_propertyType
        } else {
          return propertyType
        }
      },
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else if (this.$store.state.localLang == 'MMU') {
          return mmu_regions
        } else {
          return regions
        }
      },
      floorLevel() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "ေျမညီထပ္", "value": 100},
            {"text": "ေျမညီထပ္ ထပ္ခိုးအပါ", "value": 103},
            {"text": "ထပ္ခိုး", "value": 101},
            {"text": "1-2", "value": 1},
            {"text": "3-4", "value": 3},
            {"text": "5+", "value": 5},
            {"text": "ဒါဘာ (အမိုးေအာက္တိုက္ခန္း)", "value": 102},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Ground floor", "value": 100},
            {"text": "Ground floor with Mezzanine", "value": 103},
            {"text": "Mezzanine", "value": 101},
            {"text": "1-2", "value": 1},
            {"text": "3-4", "value": 3},
            {"text": "5+", "value": 5},
            {"text": "Penthouse", "value": 102},
          ]
        }
      },
      Furnishing() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "ပရိေဘာဂ တပ္ဆင္ထားျခင္းမရွိပါ။", "value": 0},
            {"text": "အနည္းငယ္", "value": 1},
            {"text": "အျပည့္အစံု", "value": 2},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Unfurnished", "value": 0},
            {"text": "Partially", "value": 1},
            {"text": "Fully", "value": 2},
          ]
        }
      },
      BuildingAge() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "<5", "value": 0},
            {"text": "5-10", "value": 1},
            {"text": "10-20", "value": 2},
            {"text": ">20", "value": 3},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "<5", "value": 0},
            {"text": "5-10", "value": 1},
            {"text": "10-20", "value": 2},
            {"text": ">20", "value": 3},
          ]
        }
      },
      Facing() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အေရွ႔အရပ္", "value": 0},
            {"text": "အေရွ႕ေတာင္အရပ္", "value": 1},
            {"text": "ေတာင္အရပ္", "value": 2},
            {"text": "အေနာက္ ေတာင္အရပ္", "value": 3},
            {"text": "အေနာက္အရပ္", "value": 4},
            {"text": "အေနာက္ေျမာက္အရပ္", "value": 5},
            {"text": "ေျမာက္အရပ္", "value": 6},
            {"text": "အေရွ႕ ေျမာက္အရပ္", "value": 7},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "East", "value": 0},
            {"text": "South East", "value": 1},
            {"text": "South", "value": 2},
            {"text": "South West", "value": 3},
            {"text": "West", "value": 4},
            {"text": "North West", "value": 5},
            {"text": "North", "value": 6},
            {"text": "North East", "value": 7},
          ]
        }
      },
      Source() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အက်ိဳးေဆာင္မ်ား", "value": 0},
            {"text": "ပိုင္ရွင္မ်ား", "value": 1},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Agent", "value": 0},
            {"text": "Owner", "value": 1},
          ]
        }
      },
      totalBedroomsJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      masterBedroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      BathroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      options() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {
              label: 'အိမ္ျခံေျမ အမည္',
              value: 'propertyName',
            },
            {
              label: 'လမ္း',
              value: 'Street'
            },
            {
              label: 'စာရင္းအမွတ္',
              value: 'ListingID'
            }
          ]
        }else if(this.$store.state.localLang == 'MMU'){
          return [
            {
              label: 'အိမ်ခြံမြေ အမည်',
              value: 'propertyName',
            },
            {
              label: 'လမ်း',
              value: 'Street'
            },
            {
              label: 'စာရင်းအမှတ်',
              value: 'ListingID'
            }
          ]
        } else {
          return [
            {
              label: 'Property name',
              value: 'propertyName',
            },
            {
              label: 'Street',
              value: 'Street'
            },
            {
              label: 'Listing ID',
              value: 'ListingID'
            }
          ]
        }
      },
      township() {
        if (this.$store.state.localLang == 'MM') {
          return mm_townships
        } else if (this.$store.state.localLang == 'MMU') {
          return mmu_townships
        } else {
          return townships
        }
      },
      townshipCurrent() {
        if (this.$store.state.localLang == 'MM') {
          return [{text: 'အားလံုး', value: 'Any'}]
        } else {
          return [{text: 'Any', value: 'Any'}]
        }
      },
      slots() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {
              flex: 1,
              values: ['အားလံုး', 'တိုက္ခန္း', 'ကြန္ဒို', 'အိမ္', 'ေျမ', 'စီးပြားေရးႏွင့္ဆိုင္ေသာ'],
              className: 'slot1',
              textAlign: 'right'
            }, {
              divider: true,
              content: '-',
              className: 'slot2'
            }, {
              flex: 1,
              values: [],
              className: 'slot3',
              textAlign: 'left'
            }
          ]
        } else {
          return [
            {
              flex: 1,
              values: ['Any', 'Apartment', 'Condo', 'House', 'Land', 'Commercial'],
              className: 'slot1',
              textAlign: 'right'
            }, {
              divider: true,
              content: '-',
              className: 'slot2'
            }, {
              flex: 1,
              values: [],
              className: 'slot3',
              textAlign: 'left'
            }
          ]
        }
      },
      propertySubType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertySubType
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_propertySubType
        } else {
          return propertySubType
        }
      },
      PriceArr() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {value: 'Any', text: 'အားလံုး'},
            {value: '99', text: '<100 Lks'},
            {value: '100', text: '100-200 Lks'},
            {value: '200', text: '200-300 Lks'},
            {value: '300', text: '300-400 Lks'},
            {value: '400', text: '400-500 Lks'},
            {value: '500', text: '500-600 Lks'},
            {value: '600', text: '600-700 Lks'},
            {value: '700', text: '700-800 Lks'},
            {value: '800', text: '800-900 Lks'},
            {value: '900', text: '900-1000 Lks'},
            {value: '1001', text: '>1000 Lks'},
          ]
        } else {
          return [
            {value: 'Any', text: 'Any'},
            {value: '99', text: '<100 Lks'},
            {value: '100', text: '100-200 Lks'},
            {value: '200', text: '200-300 Lks'},
            {value: '300', text: '300-400 Lks'},
            {value: '400', text: '400-500 Lks'},
            {value: '500', text: '500-600 Lks'},
            {value: '600', text: '600-700 Lks'},
            {value: '700', text: '700-800 Lks'},
            {value: '800', text: '800-900 Lks'},
            {value: '900', text: '900-1000 Lks'},
            {value: '1001', text: '>1000 Lks'},
          ]
        }
      },
    },
    mounted() {
      this.regionId = this.$store.state.regionId || 2;
      this.searchForm.RegionID = this.$store.state.regionId || 2;
      this.getList()
    },
  }
</script>

<style>
  .buy-page .mint-search {
    height: .6rem;
  }

  .buy-page .mint-searchbar {
    padding-top: .2rem;
    background-color: #fff;
  }

  .buy-page .mint-searchbar-inner {
    border: 1px solid #ccc;
  }

  .buy-page .mint-tabbar {
    background-color: #f2f2f2;
    height: .48rem;
  }

  .buy-page .mint-tabbar > .mint-tab-item.is-selected {
    background-color: #fff;
    color: #2c3e50;
  }

  .buy-page .mint-tab-item-label {
    font-size: 14px;
    line-height: .36rem;
  }

  .buy-page .mint-button--normal {
    padding: 0 !important;
  }

</style>

<style scoped>
  .header {
    width: 100%;
    height: .96rem;
    position: fixed;
    z-index: 100;
    background: #f2f2f2;
  }

  .header-input {
    height: .46rem;
    line-height: .46rem;
    text-align: center;
    position: relative;
  }

  .line-white {
    height: 2px;
    background: #fff;
  }

  .search-left {
    position: absolute;
    top: 0.02rem;
    right: 0;
    left: .05rem;
    bottom: 0;
    margin: auto 0;
  }

  .search-input {
    vertical-align: middle;
    width: 65%;
    height: .3rem;
    font-size: 16px;
    border: 1px solid #999;
  }

  .search-ifram {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #fff;
    width: 100%;
    height: 100%;
    display: block;
  }

  .btn-box {
    margin-top: .2rem;
    text-align: center;
  }

  .Back-btn {
    margin-right: .1rem;
  }

  .san-box {
    width: 0;
    height: 0;
    border-top: 6px solid black;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    display: inline-block;
    line-height: .32rem;
    margin-left: .05rem;
  }

  .township-box {
    height: 100%;
    overflow: auto;
    padding: 0;
    border: none;
  }

  .township-item {
    height: .34rem;
    border-bottom: 1px solid #ccc;
    line-height: .34rem;
    padding-left: .3rem;
    font-size: 16px;
  }

  .tab-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .reset-btn {
    width: 1.3rem;
    float: right;
    margin-right: .1rem;
  }

  .confirm-btn {
    float: right;
    width: 1.3rem;
    color: #fff !important;
    background: #ff8d00 !important;
  }

  .price-box {
    height: .5rem;
    padding: 0 .1rem;
  }

  .price-input {
    margin-top: .05rem;
    width: .4rem;
    height: .3rem;
    border: 1px solid #ccc;
  }

  .room-box {
    padding: .2rem;
  }

  .room-title {
    color: #000;
    padding-top: .15rem;
  }

  .total-rooms-item-box {
    height: .35rem;
    overflow: hidden;
    padding: 0;
    margin-bottom: .1rem;
  }

  .total-rooms-item {
    text-align: center;
    line-height: .3rem;
    height: .3rem;
    float: left;
    margin-right: .08rem;
    border: 1px solid #ccc;
    min-width: .3rem;
    border-radius: 5px;
  }

  .total-rooms-item-ed {
    color: #fff;
    background: #ff8e00;
    border: 1px solid #ff8e00;
    text-align: center;
    line-height: .3rem;
    height: .3rem;
    float: left;
    margin-right: .08rem;
    min-width: .3rem;
    border-radius: 5px;
  }

  .select-rooms-box {
    width: 100%;
    height: .4rem;
    padding-top: .2rem;
    text-align: center;
  }

  .select-rooms-bo-confirm {
    width: 1rem;
    background: #ff8e00 !important;
    text-align: center;
    color: #fff !important;
    border-radius: 5px;
    margin: 0 auto;
  }

  /*往下列表样式*/
  .list-box {
    padding-top: .96rem;
  }

  .list-items {
    width: 100%;
    margin: 0 auto;
  }

  .list-items .el-table__row {
    cursor: pointer;
  }

  .list-items .el-table__row img {
    display: block;
    width: 180px;
    height: 135px;
  }

  .list-items .el-table__row p {
    /*margin: 22px 0;*/
  }

  .room-type {
    display: inline-block;
    line-height: 1.5;
    /*min-width:15%;*/
    /*max-width: 35%;*/
    width: 38%;
  }

  .room-type-time {
    width: 25%;
  }

  .room-type-box .price-currency {
    color: red;
  }

  .buy-img-box {
    padding: 0 10px;
    display: inline-block;
    vertical-align: middle;
  }

  .buy-img-box .buy-img {
    width: 114px;
    height: 100px;
    vertical-align: middle;
  }

  .buy-info-box {
    padding: 0 10px 0 0;
    display: block;
    word-wrap: break-word;
    overflow: hidden;
    flex: 2;
  }

  .buy-info-box p {
    margin: 0;
    text-align: left;
    line-height: 1.5;
  }

  .buy-info-box p:first-child {
    margin-top: 0;
  }

  .buy-list {
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    color: #606266;
    cursor: pointer;
  }

  .buy-list:hover {
    background: #f5f7fa;
  }

  .buy-list-box {
    display: flex;
    margin-bottom: 5px;
  }

  .room-type-box {
    padding: 0 10px;
    text-align: left;
    /*margin-top:5px;*/
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .no-data {
    height: 50px;
    line-height: 50px;
    color: #909399;
    text-align: center;
  }

  .loading-more {
    width: 35px;
    display: inline-block;
  }

  img[lazy=loading] {
    margin: auto;
    background: #f0f0f0;
  }

  .loading-more-box {
    padding: 10px 0;
    text-align: center;
  }

  .buy-info-box .title {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #2c3e50;
    overflow: hidden;
  }

  .price-currency {
    color: red;
  }

  .buy-info-box .price {
    font-size: 1.2em;
  }

  .text-a p {
    text-align: right;
  }

  .info-input {
    height: .3rem;
    border: 1px solid #ccc;
    width: 100%;
    outline: none;
  }

  .info-input-box {
    padding-top: .1rem;
    width: 80%;
    margin: 0 auto;
  }

  .location-item {
    height: .48rem;
    line-height: .48rem;
  }

  .confirm-box {
    overflow: hidden;
    width: 2.1rem;
    margin: 0 auto;
    padding-bottom: .1rem;
  }
</style>
